<!-- Nested node template -->
<div class="panel panel-default">
  <div class="panel-body">

    <script type="text/ng-template" id="nodes_renderer.html">
      <div ui-tree-handle class="tree-node tree-node-content" ng-click="getInfo(node)">
        <a class="btn btn-success btn-xs" ng-if="node.nodes && node.nodes.length > 0" data-nodrag ng-click="toggle(this)">
          <span class="glyphicon" ng-class="{'glyphicon-chevron-right': collapsed, 'glyphicon-chevron-down': !collapsed }"></span>
        </a>
        <font size="3">{{node.sale_name}}<span ng-show="node.sale_code">[{{node.sale_code}}]</font>
        <p class="text-right" style="margin-top: 5px; margin-bottom: 0px">
          <small ng-show="node.guide_price != undefined">
            <font size="2">成本价{{node.cost_price | currency : '¥'}} </font>
          </small>
          <small ng-show="node.guide_price != undefined">
            <font size="2">指导价{{node.guide_price | currency : '¥'}} </font>
          </small>
          <small ng-show="node.market_price != undefined">
            <font size="2">门市价{{node.market_price | currency : '¥'}}</font>
          </small>
          <small ng-show="node.govsubsidy_price != undefined && node.govsubsidy_price != -1">
            <font size="2">政府补贴{{node.govsubsidy_price | currency : '¥'}} </font>
          </small>
        </p>
      </div>
      <ol ui-tree-nodes="" ng-model="node.nodes" ng-class="{hidden: collapsed}">
        <li ng-repeat="node in node.nodes" ui-tree-node ng-include="'nodes_renderer.html'" style="margin-left:20px"></li>
      </ol>
    </script>

    <div class="row">
	  <!-- 左侧树结构  -->
      <div class="col-sm-5" style="height:550px; overflow: auto">
        <div class="row form-horizontal">
		  <label class="col-xs-3 control-label text-right">景区搜索</label>
		  <div class="col-xs-8">
			<input type="text" class="form-control" ng-model="query" ng-change="findNodes()">
		  </div>
        </div>
        <div ui-tree id="tree-root" data-nodrop-enabled="true" data-drag-enabled="false">
          <ol ui-tree-nodes ng-model="treeData">
            <li ng-repeat="node in treeData" ui-tree-node ng-show="visible(node)" ng-include="'nodes_renderer.html'"></li>
          </ol>
        </div>
	  </div>
	  
      <!-- 右侧详细列表  -->
      <div class="row col-sm-7" ng-show="orderInfoShow">
        <div class="panel panel-success ">
          <div class="panel-heading">{{obj.name}}</div>
          <div class="panel-body">
            <div class="input-group">
              <span class="input-group-addon">身份证号</span>
              <input type="text" class="form-control" ng-model="order.cardno">
            </div>
            <div class="input-group mt20">
              <span class="input-group-addon">游客姓名</span>
              <input type="text" class="form-control" ng-model="order.name">
            </div>
            <div class="input-group mt20">
              <span class="input-group-addon">联系电话</span>
              <input type="number" class="form-control noArrow" ng-model="order.mobile">
            </div>
            <div class="input-group mt20">
              <span class="input-group-addon">购票数量</span>
              <button type="button" class="btn btn-default numText" ng-click="numModify(-1)">-</button>
              <input type="number" onkeyup="this.value=this.value.replace(/[^\d]/g,'')" 
              class="numText numInput noArrow" onpaste="return false;" ng-model="order.num">
							<button type="button" class="btn btn-default numText" ng-click="numModify(1)">+</button>
            </div>
            <div class="input-group mt20">
              <span class="input-group-addon">备注信息</span>
              <input type="text" class="form-control" ng-model="order.note">
            </div>
            <div class="input-group mt20 col-xs-6">
              <span class="input-group-addon">出游时间</span>
              <input type="text" class="form-control" datepicker-popup="yyyy-MM-dd" ng-model="section_date.label" 
               is-open="section_date.opened" readonly close-text="关闭" current-text="今天" clear-text="清除" />
              <span class="input-group-btn"  ng-if="obj.price_type == '0'">
                <button type="button" class="btn btn-default" ng-click="open($event, section_date)">
                  <i class="glyphicon glyphicon-calendar"></i>
                </button>
              </span>
              <span class="input-group-btn"  ng-if="obj.price_type == '1'">
                <button type="button" class="btn btn-default" ng-click="selectDate()">
                  <i class="glyphicon glyphicon-calendar"></i>
                </button>
              </span>
            </div>
            <div class="col-sm-12" ng-show="obj.tour_date_type == '1'">
              <p class="form-control-static text-danger">出游时间必填，该票种只能在出游日期使用！！！！</p>
            </div>

            <button type="button" class="btn btn-info btn-block mt20" ng-click="buy()" ng-disabled="btnstate">确认购票</button>
          </div>
        </div>

        <div class="panel panel-success">
          <div class="panel-heading">预定需知</div>
          <div class="panel-body tinfo">
            <p ng-bind-html="obj.bookingnotes | trustHtml"></p>
          </div>
        </div>
      </div>
	  </div>
	
  </div>
  <style type="text/css">
    * {
      margin: 0;
      padding: 0;
      border: 0;
    }

    /* --- 取消数字输入框后面上下箭头 --- */
    .noArrow::-webkit-outer-spin-button,
    .noArrow::-webkit-inner-spin-button {
      -webkit-appearance: none;
      margin: 0;
    }
    .noArrow {
      -moz-appearance: textfield;
    }

		.numText {
			width: 40px;
			height: 34px;
			float: left;
			font-size: 16px;
			text-align: center;
		}

    .numInput {
			width: 70px;
			border-top: 1px solid #ccc;
			border-bottom: 1px solid #ccc;
		} 

    ol, li {
      list-style-type:none;
      cursor:pointer;
    }

    .mt20 {
      margin-top: 20px;
    }

    /* --- Tree --- */
    .tree-node {
      padding: 5px;
      font-family: "黑体";
      border: 1px solid #dae2ea;
      background: #f8faff;
      color: #7ea1b6;
    }

    .tree-node-content {
      margin: 10px;
    }

    .tree-node-content:hover{
      color: #3c763d;
      background: #dff0d8;
    }
  </style>

</div>